<template>
	<el-button class="mb20" @click="add" type="primary">新增</el-button>
	<el-form :inline="true" class="demo-form-inline">
		<!-- <el-form-item label="Approved by">
	       <el-input  placeholder="Approved by"></el-input>
	     </el-form-item> -->
		<!-- <el-form-item label="分类筛选">
			<el-select v-model="selectData" placeholder="请选择">
				<el-option label="全部分类" :value="null"></el-option>
				<el-option label="一级分类" :value="0"></el-option>
				<el-option label="二级分类" :value="1"></el-option>
			</el-select>
		</el-form-item> -->
		<!-- <el-form-item>
	       <el-button type="primary" >搜索</el-button>
	     </el-form-item> -->
	</el-form>
	<el-table class="mb20" :data="tableData" border style="width: 100%">
		<el-table-column prop="nametype" label="题目类型" width="100">
			<template #default="scope">
				{{scope.row.nametype==1?'判断题':(scope.row.nametype==2?'选择题':'填空题')}}
			</template>
		</el-table-column>
		<el-table-column prop="name" label="题目标题" />
		<el-table-column prop="timu" label="题目内容" />
	
		<el-table-column prop="daan" label="题目答案" />
		<el-table-column prop="orders" label="题目排序" />
		<el-table-column prop="static" label="题目状态" width="100">
			<template #default="scope">
				{{scope.row.static==1?'使用':'停用'}}
			</template>
		</el-table-column>
		<el-table-column label="操作">
			<template #default="scope">
				<el-button size="mini"
					@click="edit({row:scope.row,index:scope.$index}, ()=>{scope.row.nametype = scope.row.nametype == 0 ? scope.row.nametype + '' : + scope.row.nametype})">
					编辑</el-button>
				<el-button size="mini" type="danger" @click="removeModal({row:scope.row,index:scope.$index})">删除
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<!-- <el-pagination background layout="prev, pager, next" :total="1000">
	</el-pagination> -->
	<el-dialog v-model="modalState" title="题目">
		<el-form :model="form" ref="rule" :rules="rules">
			<el-form-item label="题目类型" prop="nametype" :label-width="formLabelWidth">
				<el-select v-model="form.nametype"  @change="schange" placeholder="请选择题目类型">
					<el-option label="判断题" value="1"></el-option>
					<el-option label="选择题" value="2"></el-option>
					<el-option label="填空题" value="3"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="题目名称" prop="name" :label-width="formLabelWidth">
				<el-input v-model="form.name" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="题目选项" prop="timu" :label-width="formLabelWidth">
				<el-input v-model="form.timu" type="textarea" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="题目答案" prop="daan" :label-width="formLabelWidth">
				<template v-if="form.nametype==1">
					<el-radio v-model="form.daan" label="1" border>对</el-radio>
					<el-radio v-model="form.daan" label="0" border>错</el-radio>
				</template>
				<template v-if="form.nametype==2">
					<el-radio v-model="form.daan" label="A" border>A</el-radio>
					<el-radio v-model="form.daan" label="B" border>B</el-radio>
					<el-radio v-model="form.daan" label="C" border>C</el-radio>
					<el-radio v-model="form.daan" label="D" border>D</el-radio>
				</template>
				<template v-if="form.nametype==3">
					<el-input v-model="form.daan" autocomplete="off"></el-input>
				</template>
			</el-form-item>
			<el-form-item label="题目排序" prop="orders" :label-width="formLabelWidth">
				<el-input v-model="form.orders" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="题目状态" prop="static" :label-width="formLabelWidth">
				<el-radio v-model="form.static" label="1" border>使用</el-radio>
				<el-radio v-model="form.static" label="0" border>停用</el-radio>
			</el-form-item>

		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="modalState = false">取消</el-button>
				<el-button type="primary" @click="submit('rule')">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
	import {
		ElMessageBox,
		ElMessage
	} from 'element-plus'
	export default {
		data() {
			return {
				formLabelWidth: '120px',
				form: {
					name: '',
					nametype: '1',
					daan: "1",
					static: "1"
				},
				rules: {
					name: [{
						required: true,
						message: '请填写题目名称',
						trigger: 'blur',
					}],
					orders: [{
						required: true,
						message: '请填写题目排序',
						trigger: 'blur',
					}],
				},
				pid: []
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			schange(val) {
				if (val == 1) {
					this.form.daan = "1"
				}
				if (val == 2) {
					this.form.daan = "A"
				}
				if (val == 3) {
					this.form.daan = ""
				}
			},
			getData() {
				this.$http.post("/index.php/index/Hddh/tmgoodslist").then(data => {

					this.tableData = data


				})
			},
			submit(ref) {
				console.log(this.$refs)
				this.doRules(this.$refs[ref]).then(() => {
					if (this.id) this.form.id = this.id;

					this.$http.post(this.id ? '/index.php/index/Hddh/tmgoodsedit' :
						"/index.php/index/Hddh/tmgoodsadd",
						this.form).then(data => {
						console.log(data)
						this.modalState = false;
						ElMessage({
							message: this.id ? '编辑成功' : '新增成功',
							type: 'success',
						})
						this.getData();
					})
				})

			},
			remove(data) {
				this.$http.post("/index.php/index/Hddh/tmgoodsdel", {
					id: data.row.id
				}).then(data => {
					ElMessage({
						message: '删除成功',
						type: 'success',
					})
					this.getData();
				})
			},
			handleAvatarSuccess(file) {

				this.form.image = file.data;
			},



		}
	}
</script>
